<template>
  <view class="container">
    <BhTitle titleText="点评我的商铺"></BhTitle>
    <view style="background-color: white;padding-bottom: 1rpx;">
      <view class="header bh-row bh-justify-space-between">
        <view>通过大数据分析，有视频的店铺比没有视频的关注度更高</view>
        <!-- <image src="../images/post_add/post_add_tip_close.svg" mode="scaleToFill" class="header-close" /> -->
      </view>
      <view class="title">
        为自己的商铺撰写一个真实的点评吧。
      </view>
      <view class="sub-title">
        您的真实评价能帮助找店人更好的了解。
      </view>
      <view class="content-wrap">
        <textarea v-model="postDto.content" maxlength="200" placeholder="说点什么介绍一下你的商铺吧..." placeholder-class="content-placeholder" 
          @input="onFeature" class="content" />
        <view class="char-number">{{ postDto.content.length }}/200</view>
      </view>
      <view class="speak-wrap">
        <!-- <view>
          <view class="speak-icon-circle">
            <image src="../images/post_add/post_add_speak.png" mode="scaleToFill" class="speak-icon" />
          </view>
        </view>


        <view class="speak-title">点击话筒，开始说话</view> -->
      </view>
      <!-- <view class="sound-wrap bh-row bh-justify-space-between">
        <view class="sound-icon">语音图标</view>
        <view class="sound-del">删除语音</view>
      </view> -->
      <!-- <view class="record-btn" @touchstart="startRecord" @touchend="stopRecord">
        {{ recording ? '松开结束' : '按住录音' }}
      </view> -->
      <!-- <button @tap="playAudio" :disabled="!tempFilePath">播放录音</button>
      <button @tap="uploadAudio" :disabled="!tempFilePath">上传录音</button> -->
    </view>

    <view style="height: 96rpx;"></view>
    <view class="continue" @click="postAdd('feature')">
      保存
    </view>
    <view style="height: 96rpx;"></view>
  </view>
</template>

<script>
import {post_add_mixin} from './post_add_mixin'
export default {
  components: {
  },
  mixins: [post_add_mixin],
  data() {
    let that = this
    return {
      ...post_add_mixin.initData(that),
    }
  },
  computed: {},
  methods: {
    // onFeature() {
    // },
    // 开始录音
    startRecord() {
      this.recording = true;
      uni.startRecord({
        success: (res) => {
          console.log('开始录音成功', res.tempFilePath);
          this.tempFilePath = res.tempFilePath;
        },
        fail: (err) => {
          console.error('开始录音失败', err);
        },
      });
    },
    // 停止录音
    stopRecord() {
      if (this.recording) {
        this.recording = false;
        uni.stopRecord();
        console.log('停止录音');
      }
    },
    // 播放录音
    playAudio() {
      if (!this.tempFilePath) {
        uni.showToast({
          title: '请先录音',
          icon: 'none',
        });
        return;
      }

      if (!this.audioContext) {
        this.audioContext = uni.createInnerAudioContext();
        this.audioContext.src = this.tempFilePath;
      }

      this.audioContext.play();
    },
    // 上传录音文件
    uploadAudio() {
      if (!this.tempFilePath) {
        uni.showToast({
          title: '请先录音',
          icon: 'none',
        });
        return;
      }

      uni.uploadFile({
        url: this.serverUrl,
        filePath: this.tempFilePath,
        name: 'file',
        success: (uploadRes) => {
          const data = JSON.parse(uploadRes.data);
          console.log('上传成功', data);
        },
        fail: (err) => {
          console.error('上传失败', err);
        },
      });
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
  height: 100vh;
}

.container {
  background-color: #F5F9FA;
  width: 100%;
  height: 100vh;
}

.header {
  background: rgba(248, 113, 71, 0.1);
  font-size: 24rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  padding: 16rpx 32rpx;

  color: #F87147;

  .header-close {
    width: 36rpx;
    height: 36rpx;
    display: block;
  }
}

.title {
  margin-top: 24rpx;
  margin-left: 32rpx;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 40rpx;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);

}

.sub-title {
  margin-top: 24rpx;
  margin-left: 32rpx;
  font-size: 24rpx;
  font-weight: normal;

  color: #9E9E9E;
}

.content-wrap {
  margin-top: 64rpx;
  margin-left: 32rpx;
  margin-right: 32rpx;
  border-radius: 16rpx;
  opacity: 1;
  padding-top: 32rpx;
  padding-left: 32rpx;
  font-size: 28rpx;
  background: #F5F5F5;
  padding-bottom: 1rpx;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.3;
  .content-placeholder {

    font-weight: normal;
    color: #999999;
  }

  .char-number {
    text-align: right;
    color: #9E9E9E;
    margin-bottom: 31rpx;
    margin-right: 32rpx;
  }
}

.speak-wrap {
  margin-top: 48rpx;
  text-align: center;
  margin-left: 0;
  margin-right: 0;

  .speak-icon-circle {
    width: 104rpx;
    height: 104rpx;
    margin: auto;
    opacity: 1;
    text-align: center;
    border-radius: 50%;

    background: #F8D247;

    .speak-icon {
      width: 46.22rpx;
      height: 58.22rpx;
      margin-top: 22rpx;
    }
  }

  .speak-title {
    margin-top: 32rpx;
    margin-bottom: 32rpx;
    padding-bottom: 1rpx;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 28rpx;
    text-align: center;
    letter-spacing: 0px;

    color: rgba(0, 0, 0, 0.85);
  }
}

.sound-wrap {
  margin-left: 32rpx;
  margin-right: 32rpx;
  margin-top: 32rpx;
  margin-bottom: 32rpx;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);

  .sound-icon {}

  .sound-del {}
}

.continue {
  position: absolute;
  bottom: 96rpx;
  left: 70rpx;
  right: 70rpx;
  border-radius: 48rpx;
  opacity: 1;
  padding-top: 42rpx;
  padding-bottom: 42rpx;

  background: #F8D247;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
}
</style>